<template>
    <div class="cpn-top">
        <ul>
            <li v-for="item in list" :key="item.id" :class="selecteId === item.id ? 'color' : ''"
                @click="changeId(item.id)"> {{ item.name }} </li>

        </ul>
        <p>Copyright © 2022 蛙蛙在线工具 版权所有 <a href="">粤ICP备18006158号</a> </p>
    </div>
</template>
<script>

export default {
    data() {
        return {
            list: [{
                id: 1,
                name: "关于"
            },
            {
                id: 2,
                name: "-  反馈"
            },
            {
                id: 3,
                name: "-  赞赏"
            },
            {
                id: 4,
                name: "-  小程序"
            },
            {
                id: 5,
                name: "-  文章"
            },
            {
                id: 6,
                name: "-  会员"
            },



            ],

            selecteId: "1"
        }
    },
    methods: {
        changeId(val) {
            this.selecteId = val;
        }
    }

}
</script>
<style scoped lang="scss">
.cpn-top {
    width: 80%;
    border-top: 1px rgb(174, 174, 174) solid;
    text-align: center;
    margin: auto;
    margin-top: 50px;

    ul {width: 280px;
        padding: auto;
        display: flex;
        margin: auto;
        align-items: center;
    }

    li {
        list-style: none;
        font-size: 15px;
        color: rgb(0, 0, 0);
        cursor: pointer;
        margin-top: 20px;
        padding-left: 5px;
    }

    .color {
        color: #4CAF50;
    }

    li:hover {
        color: #4CAF50;
    }
    p{
        margin-top: 10px;
        font-size:10px;
        color: rgb(152, 152, 152);

        a{
            text-decoration: none;
            color: rgb(92, 92, 92);
        }
        a:hover {
            color: #4CAF50;
        }
    }
}
</style>



